<script setup>
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'
let search = ref('')
let pageNum = ref(1)
let pageSize = ref(10)
let total = ref(5)
let tableData = reactive([])

let dialogVisible = ref(false)
let dialogVisible1 = ref(false)

let form = reactive({})
let formStatus = reactive({})

onMounted(() => {
   load()
})
function load() { // 加载数据，其实就是向后台发请求
  let url = 'http://localhost/user/userPage?pageNum=' + pageNum.value + '&pageSize=' + pageSize.value + '&search=' + search.value
  axios.get(url)
    .then(function (response) {
      let records = response.data.data.records
      // 清空 tableData数组
      tableData.length = 0
      tableData.push(...records)
      total.value = response.data.data.total
    })
    .catch(function (error) {
      console.log(error);
    });
}

function onSearch() {
  load()
}

function handleSizeChange(num) {
  pageSize.value = num
  load()
}

function handleCurrentChange(num) {
  pageNum.value = num
  load()
}

function save() {
  // console.log(form);
  // 1. 将form数据发送到后台存数据库(post请求)
  axios.post('http://localhost/user/saveUser', form)
    .then(function (response) {
      console.log(response.data);
      if (response.data.code == 20000) {       
        ElMessage({
          message: response.data.message,
          type: 'success',
        })
        load()
      }
    })
    .catch(function (error) {
      console.log(error);
    });

  // 2. 关闭el-dialog
  dialogVisible.value = false
}

function update() {
  // console.log(form);
  // 1. 将form数据发送到后台存数据库(post请求)
  axios.post('http://localhost/user/updateUser', form)
    
    .then(function (response) {
      console.log(response.data);
      if (response.data.code == 20000) {       
        ElMessage({
          message: response.data.message,
          type: 'success',
        })
        load()
      }
    })
    .catch(function (error) {
      console.log(error);
    });

  // 2. 关闭el-dialog
  dialogVisible1.value = false
}

function updateUserStatus(status,id) {
  formStatus.id = id
  formStatus.status = status
  axios.post('http://localhost/user/updateUserStatus', formStatus)
    
    .then(function (response) {
      console.log(response.data);
      if (response.data.code == 20000) {       
        ElMessage({
          message: response.data.message,
          type: 'success',
        })
        load()
      }
    })
    .catch(function (error) {
      console.log(error);
    });

  // 2. 关闭el-dialog
  dialogVisible1.value = false
}

function newUser() {
  // 清空form数据
  form.name=''
  form.email=''
  form.id=''
  // 开启el-dialog 新增用户
  dialogVisible.value = true
}

function UpdateUser() {
  // . 开启el-dialog 修改用户
  dialogVisible1.value = true
}

function Mesg() {
  // . 开启el-dialog 修改用户
  dialogVisible2.value = true
}

const rowClick = (row) => {
  // 当用户点击表格的某一行时，将该行的数据赋值给form
  form.name = row.name;
  form.email = row.email;
  form.id = row.id
};


</script>

<template>
  <div style="display: flex; flex-direction: column;">

    <!--  搜索区域 -->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 15%"></el-input>
      <el-button type="primary" @click="onSearch">按用户名查询</el-button>
    </div>

    <!-- 新增用户 -->
    <el-button type="primary" @click="newUser" style="width: 70px;">新增用户</el-button>

    <!-- 数据展示 -->
    <el-table :data="tableData" @row-click="rowClick" style="width: 100%">
      <el-table-column label="序号" width="180">
        <template #default="scope">
            {{ scope.$index + 1 }} 
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="180" />
      <el-table-column prop="password" label="密码" width="120" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column prop="status" label="状态" width="80">
        <template #default="scope">
          <span v-if="scope.row.status === 1"><el-button type="primary" @click="updateUserStatus(0,scope.row.id)" style="width: 70px;">启用用户</el-button></span>
          <span v-else><el-button type="primary" @click="updateUserStatus(1,scope.row.id)" style="width: 70px;">禁言用户</el-button></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <el-button type="primary" @click="UpdateUser" style="width: 70px;">修改用户</el-button>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin: 10px 0">
      <el-pagination v-model:currentPage="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 50, 100]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!-- 新增 -->
    <el-dialog v-model="dialogVisible" title="新增" width="30%">
      <el-form :model="form" label-width="150px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog v-model="dialogVisible1" title="修改" width="30%">
      <el-form :model="form" label-width="150px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="update">确定</el-button>
        </span>
      </template>
    </el-dialog>


    <!-- 个人信息 -->
    <el-dialog v-model="dialogVisible2" title="修改个人信息" width="30%">
      <el-form :model="form" label-width="150px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.email" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="update">确定</el-button>
        </span>
      </template>
    </el-dialog>



  </div>

</template>

<style scoped></style>
